<template>
  <div class='login'>
    <img :src="imgs.logo" alt="logo" class="lg-logo">
    <img :src="imgs.title" alt="title" class="lg-title">
    <div class="lg-input-b">
      <van-cell-group>
        <van-field
          v-model="userInfo.number"
          label="账号"
          placeholder="请输入工号"
          rows="1"
        />
      </van-cell-group>
    </div>
    <div class="lg-input-b">
      <van-cell-group>
        <van-field
          v-model="userInfo.password"
          label="密码"
          type="password"
          placeholder="请输入密码"
          rows="1"
        />
      </van-cell-group>
    </div>
    <div class="lg-btn">
      <van-button type="primary" :loading="isLoading" @click="login">登录</van-button>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        logo:require('../../assets/images/logo.png'),
        title:require('../../assets/images/title.png')
      },
      userInfo:{
        number:"16051",
        password:"888888",
      },
      isLoading:false,
    };
  },
  methods: {
    login(){
      this.isLoading=true
      _g.apiPost('users/login',this.userInfo).then(res=>{
        _g.toMessage(res)
        if(!res.error){
          sessionStorage.setItem('number',this.userInfo.number)
          this.$router.push('/home')
        }
        this.isLoading=false
      })
    }
  },
  created() {
    _g.apiPost('wx/login').then(res=>{
      console.log(res,'微信登录')
    })
  }
};
</script>
<style lang="scss" scoped>
.login {
  padding-top: 60px;
  box-sizing: border-box;

  .lg-logo{
    width: 250px;
    height: 250px;
    margin: 60px auto;
    margin-top: 0;
  }
  .lg-title{
    width: 576px;
    height: 85px;
    margin: 0 auto;
    margin-bottom: 160px;
  }
}

.lg-input-b,.lg-btn{
  width: 85%;
  margin: 0 auto;
}
.lg-input-b{
   margin-bottom: 40px;
}
.lg-btn{
  margin-top: 80px;
}
</style>